<div class="attribute-release-policy-container">
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title"><span th:remove="tag" th:text="#{services.form.header.attrRelPolicy}" /></h3>
        </div>
        <div class="panel-body">
            <div class="checkbox-group">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="1"
                               ng-model="serviceFormCtrl.serviceData.attrRelease.releasePassword"
                               ng-checked="serviceFormCtrl.serviceData.attrRelease.releasePassword" />
                        <span th:remove="tag" th:text="#{services.form.label.attrRelease.releaseCredPassword}" />
                        <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                           data-toggle="tooltip"
                           data-placement="top"
                           th:title="#{services.form.tooltip.attrRelease.releaseCredPassword}"></i>
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="1"
                               ng-model="serviceFormCtrl.serviceData.attrRelease.releaseTicket"
                               ng-checked="serviceFormCtrl.serviceData.attrRelease.releaseTicket" />
                        <span th:remove="tag" th:text="#{services.form.label.attrRelease.releaseProxyTicket}" />
                        <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                           data-toggle="tooltip"
                           data-placement="top"
                           th:title="#{services.form.tooltip.attrRelease.releaseProxyTicket}"></i>
                    </label>
                </div>
            </div>

            <!-- Attribute Filter -->
            <div class="form-group">
                <label class="col-sm-4" for="attFilter">
                    <span th:remove="tag" th:text="#{services.form.label.attrRelease.attrFilter}" />
                    <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                       data-toggle="tooltip"
                       data-placement="top"
                       th:title="#{services.form.tooltip.attrRelease.attrFilter}"></i>
                </label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input type="text" class="form-control" id="attFilter" ng-model="serviceFormCtrl.serviceData.attrRelease.attrFilter"/>
                    </div>
                </div>
            </div>

            <!-- Principle Attribute Repository Options -->
            <div class="panel panel-default">
                <div class="panel-heading"><span th:remove="tag" th:text="#{services.form.header.principleAttRepo}" /></div>
                <div class="panel-body">
                    <div class="radio-group">
                        <!-- Principle Repository Radio Button - Default -->
                        <label class="radio-inline">
                            <input type="radio" name="prinFilterDefault" id="prinFilterDefault" value="DEFAULT"
                                   ng-model="serviceFormCtrl.serviceData.attrRelease.attrOption"
                                   ng-checked="serviceFormCtrl.serviceData.attrRelease.attrOption == 'DEFAULT'" />
                            <span th:remove="tag" th:text="#{services.form.label.attrRelease.principleAttRepo.default}" />
                        </label>
                        <!-- Principle Filter Radio Button - Cached -->
                        <label class="radio-inline">
                            <input type="radio" name="prinFilterCached" id="prinFilterCached" value="CACHED"
                                   ng-model="serviceFormCtrl.serviceData.attrRelease.attrOption"
                                   ng-checked="serviceFormCtrl.serviceData.attrRelease.attrOption == 'CACHED'" />
                            <span th:remove="tag" th:text="#{services.form.label.attrRelease.principleAttRepo.cached}" />
                        </label>
                    </div>

                    <!-- Principle Attribute Repo Default Options -->
                    <div class="well well-sm" ng-show="serviceFormCtrl.serviceData.attrRelease.attrOption == 'DEFAULT'">
                        <span th:remove="tag" th:text="#{management.services.service.noAction}" />
                    </div>

                    <!-- Principle Attribute Repo Cached Options -->
                    <div class="principle-attribute-cached-container" 
                         ng-show="serviceFormCtrl.serviceData.attrRelease.attrOption == 'CACHED'">
                        <!-- Principle Attribute Repo Cached Time -->
                        <div class="form-group">
                            <label class="col-sm-4" for="cachedTime">
                                <span th:remove="tag" th:text="#{services.form.label.attrRelease.principleAttRepo.cached.timeUnit}" />
                                <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                                   data-toggle="tooltip"
                                   data-placement="top"
                                   th:title="#{services.form.tooltip.attrRelease.principleAttRepo.cached.timeUnit}"></i>
                            </label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <div class="input-group-addon input-group-required" th:title="#{services.form.required}">
                                        <i class="fa fa-exclamation-triangle"></i>
                                    </div>
                                    <select class="form-control" id="cachedTime" ng-model="serviceFormCtrl.serviceData.attrRelease.cachedTimeUnit">
                                        <option ng-repeat="opt in serviceFormCtrl.selectOptions.timeUnitsList" ng-attr-value="{{ opt.value }}"
                                                ng-selected="serviceFormCtrl.isSelected(opt.value, serviceFormCtrl.serviceData.attrRelease.cachedTimeUnit)">{{ opt.name }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Principle Attribute Repo Cached Expiration -->
                        <div class="form-group">
                            <label class="col-sm-4" for="cachedExp">
                                <span th:remove="tag" th:text="#{services.form.label.attrRelease.principleAttRepo.cached.expiration}" />
                                <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                                   data-toggle="tooltip"
                                   data-placement="top"
                                   th:title="#{services.form.tooltip.attrRelease.principleAttRepo.cached.expiration}"></i>
                            </label>
                            <div class="col-sm-8">
                                <input type="number" min="0" class="form-control" id="cachedExp" ng-model="serviceFormCtrl.serviceData.attrRelease.cachedExpiration" />
                            </div>

                            <!-- Principle Attribute Repo Merging Strategy -->

                            <label class="col-sm-4" for="mergingStrategy">
                                <span th:remove="tag" th:text="#{services.form.label.attrRelease.principleAttRepo.cached.mergeStrategy}" />
                                <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                                   data-toggle="tooltip"
                                   data-placement="top"
                                   th:title="#{services.form.tooltip.attrRelease.principleAttRepo.cached.mergeStrategy}"></i>
                            </label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <div class="input-group-addon input-group-required" th:title="#{services.form.required}">
                                        <i class="fa fa-exclamation-triangle"></i>
                                    </div>
                                    <select class="form-control" id="mergingStrategy" ng-model="serviceFormCtrl.serviceData.attrRelease.mergingStrategy">
                                        <option ng-repeat="opt in serviceFormCtrl.selectOptions.mergeStrategyList" ng-attr-value="{{ opt.value }}"
                                                ng-selected="serviceFormCtrl.isSelected(opt.value, serviceFormCtrl.serviceData.attrRelease.mergeStrategy)">{{ opt.name }}</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>

    <!-- Attribute Filter Policies Options -->
    <div class="panel panel-default">
        <div class="panel-heading"><span th:remove="tag" th:text="#{services.form.header.attrPolicy}" /></div>
        <div class="panel-body">
            <div class="radio-group">

                <!-- Filter Policies Radio Button - Return All -->
                <label class="radio-inline">
                    <input type="radio" name="policiesReturnAll" id="policiesRadio" value="all"
                           ng-model="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type"
                           ng-checked="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type == 'all'" />
                    <span th:remove="tag" th:text="#{services.form.label.attrRelease.policies.returnAll}" />
                </label>

                <label class="radio-inline">
                    <input type="radio" name="policiesReturnAll" id="policiesRadioDeny" value="deny"
                           ng-model="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type"
                           ng-checked="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type == 'deny'" />
                    <span th:remove="tag" th:text="#{services.form.label.attrRelease.policies.denyAll}" />
                </label>
                
                <!-- Filter Policies Radio Button - Return Allowed -->
                <label class="radio-inline">
                    <input type="radio" name="policiesReturnAllowed" id="policiesReturnAllowed" value="allowed"
                           ng-model="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type"
                           ng-checked="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type == 'allowed'"
                           ng-disabled="serviceFormCtrl.isEmpty( serviceFormCtrl.formData.availableAttributes )" />
                    <span th:remove="tag" th:text="#{services.form.label.attrRelease.policies.returnAllowed}" />
                </label>

                <!-- Filter Policies Radio Button - Return Allowed -->
                <label class="radio-inline">
                    <input type="radio" name="policiesReturnMapped" id="policiesReturnMapped" value="mapped"
                           ng-model="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type"
                           ng-checked="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type == 'mapped'"
                           ng-disabled="serviceFormCtrl.isEmpty( serviceFormCtrl.formData.availableAttributes )" />
                    <span th:remove="tag" th:text="#{services.form.label.attrRelease.policies.returnMapped}" />
                </label>
            </div>

            <!-- Attribute Release Policies Return All Option -->
            <div class="well well-sm" ng-show="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type == 'all' || serviceFormCtrl.isEmpty( serviceFormCtrl.formData.availableAttributes )">
                <span th:remove="tag" th:text="#{management.services.service.noAction}" />
            </div>

            <!-- Attribute Release Policies Return Allowed Option -->
            <div class="form-group" ng-show="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type == 'allowed' &amp;&amp; !serviceFormCtrl.isEmpty( serviceFormCtrl.formData.availableAttributes )">
                <label class="col-sm-3" for="returnAllowed">
                    <span th:remove="tag" th:text="#{services.form.label.attrRelease.policies.returnAllowed}" />
                    <i class="fa fa-lg fa-question-circle form-tooltip-icon"
                       data-toggle="tooltip"
                       data-placement="top"
                       th:title="#{services.form.tooltip.attrRelease.policies.returnAllowed}"></i>
                </label>
                <div class="col-sm-9">
                    <select class="form-control" multiple="true" id="returnedAllowed" 
                            ng-model="serviceFormCtrl.serviceData.attrRelease.attrPolicy.allowed">
                        <option ng-repeat="opt in serviceFormCtrl.formData.availableAttributes" ng-attr-value="{{ opt }}"
                                ng-selected="serviceFormCtrl.isSelected(opt, serviceFormCtrl.serviceData.attrRelease.attrPolicy.allowed)">{{ opt }}</option>
                    </select>
                </div>
            </div>

            <!-- Attribute Release Policies Return Mapped Option -->
            <div class="panel panel-default" ng-show="serviceFormCtrl.serviceData.attrRelease.attrPolicy.type == 'mapped' &amp;&amp; !serviceFormCtrl.isEmpty( serviceFormCtrl.formData.availableAttributes )">
                <table id="returnMapTable" class="table table-striped table-hover table-responsive table-condensed" >
                    <thead>
                    <tr>
                        <th class="col-md-4"><span th:remove="tag" th:text="#{services.form.label.attrRelease.policies.sourceAttribute}" /></th>
                        <th class="col-md-8">
                            <span th:remove="tag" th:text="#{services.form.label.attrRelease.policies.casAttribute}" />
                            <i class="fa fa-lg fa-question-circle form-tooltip-icon no-float"
                               data-toggle="tooltip"
                               data-placement="top"
                               th:title="#{services.form.tooltip.attrRelease.policies.returnMapped}"></i>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="mappedValue in serviceFormCtrl.formData.availableAttributes">
                        <td class="va-middle">{{ mappedValue }}</td>
                        <td><input ng-model="serviceFormCtrl.serviceData.attrRelease.attrPolicy.mapped[ mappedValue ]" type="text" class="form-control input-sm" /></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
